<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>一个简单的tab栏</title>
    <style>
        *{
            padding:0;
            margin:0;
        }
        .w{
            width: 1000px;
            margin:0 auto;
        }
        .nav{
            background-color: #30BC73;
            height: 50px;
            color: white;
            font-size: 18px;
            font-family: 'Arial', "Microsoft YaHei UI";
        }
        .nav-tab ul{
            list-style: none;
            overflow: hidden;
        }

        .nav-tab li{
            float: left;
            line-height:50px;
            padding: 0 10px;
            cursor: pointer;
        }

        .nav-tab .nav-item-div{
            padding: 80px 0;
            text-align: center;
            font-size: 25px;
            display: none;
            border-radius: 0 0 10px 10px;
        }

        li.tab-selected{
            background-color: #2ba15d;
        }
    </style>

    <script src="libs/jquery3_1_1.min.js"></script>
    <script>
        $(function () {
            initMenuW();
            $(".nav li").eq(0).addClass("tab-selected");
            $(".nav-item-div").eq(0).show().children("span").text($(".nav li").eq(0).text());
            $(".nav li").hover(function () {
                $(".nav-item-div").hide();
                $(this).addClass("tab-selected").siblings().removeClass("tab-selected");
                $(".nav-item-div").eq($(this).index()).show().children("span").text($(this).text());
            },function () {
//                $(".nav-item-div").eq($(this).index()).css("display","none");
            });
        });

        function initMenuW() {
            var width = 0;
            $(".nav li").each(function () {
                width += $(this).width()+parseInt($(this).css("padding-left"))+parseInt($(this).css("padding-right"));
                var wid = $(this).css('width');
                console.log(wid);
            });
            $(".nav .nav-item-div").width(width).css({"background-color":"#2ba15d"});
        }
    </script>
</head>
<body>
<div class="nav">
    <div class="nav-tab w">
        <ul>
            <li>演员</li>
            <li>你还要我怎样</li>
            <li>刚刚好</li>
            <li>绅士</li>
            <li>丑八怪</li>
            <li>我好像在哪儿见过你</li>
            <li>认真的雪</li>
            <li>方圆几里</li>
            <li>来日方长</li>
            <li>一半</li>
        </ul>

        <div class="nav-item-div"><span></span></div>
        <div class="nav-item-div"><span></span></div>
        <div class="nav-item-div"><span></span></div>
        <div class="nav-item-div"><span></span></div>
        <div class="nav-item-div"><span></span></div>
        <div class="nav-item-div"><span></span></div>
        <div class="nav-item-div"><span></span></div>
        <div class="nav-item-div"><span></span></div>
        <div class="nav-item-div"><span></span></div>
        <div class="nav-item-div"><span></span></div>
    </div>
</div>
<div class="content"></div>
</body>
</html>